<template>
  <div class="hotel" @click="to('/pages-sub/hotel/detail/index', { id: item.id })">
    <div class="img">
      <image class="banner" :src="imgs[0]" />
      <!-- <div class="heart">
        <wd-icon name="heart-filled" size="32rpx" color="rgba(255, 89, 64, 1)"></wd-icon>
      </div> -->
    </div>
    <div class="info">
      <Reference class="mb-10px" :list="item.artistsList" />
      <div class="title">{{ item.name }}</div>
      <div class="specs">
        <image class="icon" src="/static/images/icon/location3.png" />
        距离{{ distance(item.distance) }}
        <div class="line" v-if="item.remark"></div>
        {{ item.remark }}
      </div>
      <div class="price">{{ item.price }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { to } from '@/utils/page'
import { distance } from '@/utils/index'

defineOptions({ name: 'HotelItemBig' })

const props = defineProps(['hotel'])
const item = props.hotel

const imgs = ref([])
if (item.imgUrls) {
  imgs.value = item.imgUrls.split(',')
}
</script>
<style lang="scss" scoped>
.hotel {
  margin-bottom: 26rpx;
  overflow: hidden;
  font-size: 0;
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0px 12rpx 20rpx rgba(0, 0, 0, 0.05);
  .img {
    position: relative;
    width: 100%;
    height: 458rpx;
    border-radius: 30rpx 30rpx 0 0;
    .banner {
      width: 100%;
      height: 100%;
      background-color: var(--bgc1);
    }
    .heart {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46rpx;
      height: 46rpx;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
    }
  }
  .info {
    padding: 20rpx;
    font-size: 0;
    .title {
      font-size: 30rpx;
      font-weight: 600;
      line-height: 36rpx;
      color: var(--color1);
      @include text-clamp(1);
    }
    .specs {
      display: flex;
      align-items: center;
      height: 38rpx;
      margin-top: 12rpx;
      font-size: 26rpx;
      line-height: 32rpx;
      color: var(--color4);
      .icon {
        width: 27rpx;
        height: 27rpx;
        margin-right: 4rpx;
      }
      .line {
        display: inline-block;
        width: 1rpx;
        height: 20rpx;
        margin: 0 8rpx;
        background-color: #dfe3e6;
      }
    }
    .price {
      margin-top: 12rpx;
      font-size: 38rpx;
      font-weight: 700;
      line-height: 45rpx;
      color: var(--color1);
      &::before {
        display: inline-block;
        font-size: 22rpx;
        content: '￥';
      }
    }
  }
}
</style>
